const webpack = require('webpack');
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.config.common')
const { getPath } = require('./utils')

// 使用index.html模版
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase:false,
        watchContentBase:false,
        port: 8080,
        // hot: true,
        quiet: true,
        publicPath:'/',
        overlay: {
            warnings: true,
            errors: true
        },
        historyApiFallback: {
            rewrites: [
                { from: /.*/, to:path.posix.join('/', 'index.html') },// history模式刷新后从index.html寻找路由
            ],
        },
        stats:"minimal"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            esModule: false
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            esModule: false,
                            importLoaders: 1,
                        }
                    },
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV: '"development"'
            }
        }),
        // 热更新hmr
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: getPath('../index.html'),
            filename: "index.html",
            inject:true
        }),

    ]
})